<template>
  <div class="goods-item transition-ease" :class="{theme2: theme == 2, theme3: theme == 3, theme4: theme == 4}">
    <div class="image" @click="toGoodsDetail()">
        <img v-lazy="goodsInfo.path || goodsInfo.goodsPhoto || goodsInfo.goodsMainPhotoPath || goodsInfo.vo_main_photo_url" alt="商品图片">
      </div>
    <div class="content">
      <!-- 商品价格及购买人数 -->
      <div class="line">
        <div class="price">¥{{goodsInfo.storePrise || goodsInfo.storePrice || goodsInfo.vo_store_price || 0 || goodsInfo.store_price | currency}}</div>
        <div class="buyer-number" v-show="theme == 1">{{goodsInfo.number || goodsInfo.vo_goods_salenum || 0}}人付款</div>
        <div class="buyer-number" v-show="theme == 6">月销{{goodsInfo.number || goodsInfo.monthlySales || goodsInfo.goodsSaleNum || 0}}件</div>
        <div class="clear"></div>
      </div>
      <!-- 商品名称 -->
      <div class="line">
        <div class="name" @click="toGoodsDetail()">{{goodsInfo.goodsName || goodsInfo.goods_name}} {{goodsInfo.goodsSerial || goodsInfo.goods_serial}}</div>
      </div>
      <!-- 卖家名称及地址 -->
      <div class="line" v-show="theme == 1 || theme == 6">
        <a href="javascript: void(0)" class="seller" @click="$router.push(`/shop/${goodsInfo.vo_storeId}`)">{{goodsInfo.seller || goodsInfo.storeName}}</a>
        <div class="address">{{goodsInfo.loc || goodsInfo.storeArea}}</div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      theme: {
        type: Number,
        default: 1
      },
      goodsInfo: {
        type: Object,
        default: () => { return {} }
      }
    },
    methods: {
      /**
       * 跳转到商品详情页
       */
      toGoodsDetail() {
        // 如果商品id不存在，则不处理
        if (!this.goodsInfo.goodsId && !this.goodsInfo.vo_id && !this.goodsInfo.id) {
          return
        }

        // 如果商品id存在，则跳转到商品详情页
        this.$router.push({path: `/goods/detail/${(this.goodsInfo.goodsId || this.goodsInfo.vo_id || this.goodsInfo.id)}`})
      }
    }
  }
</script>

<style lang="scss" scoped>
.clear {
  clear: both;
}
.goods-item {
  background-color: #FFFFFF;
  border: 1px solid #F6F6F6;
  cursor: default;
  width: 302px;
  height: 406px;

  &.theme2 {
    border: 1px solid #DDDDDD;
    width: 178px;
    height: 260px;

    .image {
      height: 180px;
    }
  }

  &.theme3 {
    border: 0px;
    width: 152px;
    height: 220px;

    &:hover {
      border: 0px;
    }

    .image {
      height: 150px;
    }

    .line {
      margin-bottom: 8px !important;

      .name {
        margin-top: 2px;
      }

      .price {
        font-size: 14px !important;
      }
    }
  }
  &.theme4 {
    width: 180px;
    height: 262px;

    .image {
      height: 180px;
    }
  }
  &:hover {
    box-shadow: 3px 3px 10px #DDDDDD;
    border: 1px solid #DDDDDD;
  }

  .image {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    width: 100%;
    height: 304px;
    overflow: hidden;
  }

  .content {
    font-size: 12px;
    padding: 10px 8px;

    .line {
      margin-bottom: 10px;

      .price {
        color: #F00384;
        float: left;
        font-size: 14px;
        height: 18px;
      }

      .buyer-number {
        color: #999999;
        float: right;
        margin-top: 6px;
      }

      .name {
        color: #404040;
        cursor: pointer;
        font-size: 12px;
        height: 28px;
        line-height: 14px;
        text-overflow: ellipsis;
        white-space: pre-line;
        overflow: hidden;
        &:hover {
          color: #F00384;
        }
      }

      .seller {
        background: url('../../../assets/list.png') left center no-repeat;
        cursor: pointer;
        font-size: 12px;
        float: left;
        padding-left: 18px;
        text-decoration: underline;

        &:hover {
          color: #F00384;
        }
      }

      .address {
        float: right;
      }
    }
  }
}
</style>